<template>
	<!--页中的外层的容器(包裹器)可以使用id选择器,但是组件中的包裹器不要使用id选择器-->
	<view class="categoryContainer">
		<!--头部-->
		<view class="categoryHeader" @click="toSearch"><view class="search">搜索商品</view></view>
		<!--内容区域-->
		<view class="contentContainer">
			<view class="leftContainer">
				<scroll-view scroll-y="true" class="leftScroll">
					<view class="scrollItem" :class="item.id==pid?'active':''" v-for="(item,index) in cateGoryList" :key='index' @click="handlderChange(item.id)">{{item.categoryName}}</view>
				</scroll-view>
			</view>
			<view class="rightContainer">
				<scroll-view scroll-y="true" class="rightScroll">
					<view class="contentList">
						<image class="contentImg" :src="cateGoryDetil.bigImg"></image>
						<view class="contentItem" v-for="(content,index) in cateGoryDetil.Detil" :key='item.id'>
							<image :src="content.categoryImage"></image>
							<text>{{content.categoryName}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>


<script>
// 引入request
import request from '../../utils/request.js'
export default {
	name:'',
	data() {
		return {
			cateGoryList:[],
			pid:'',
			cateGoryDetil:[]
		}
	},
	mounted(){
		// 获取分类左侧的数据
		this.getCategoryList()
		// 
		
	},
	methods: {
		async getCategoryList(){
			let result=await request('/classification')
			if(result.code==200){
				let List=result.classification
				this.cateGoryList=List
				this.pid=result.classification[0].id
				this.getCategoryDetail(this.pid)
			}
		},
		handlderChange(id){
			this.pid=id
			this.getCategoryDetail(id)
		},
		getCategoryDetail(pid){
			let tmd=false
			if(tmd){
				return
			}
			tmd=true
			uni.request({
				url:`https://wcgi.jianke.com/category/api/fullCategories?pid=${pid}&platform=1`,
				data:{},
				method:"GET",
				success:res=>{
					let Detil=res.data
					let bigImg=[]
					let obj=this.cateGoryList.filter(item=>{
						return item.id==pid
					})
					let cateGoryDetil={
						Detil,
						bigImg:obj[0].adImage
					}
					this.cateGoryDetil=cateGoryDetil
				}
			})
			setTimeout(()=>{
				tmd=false
			},200)
		},
		toSearch(){
			uni.navigateTo({
				url:'../../pages/search/search'
			})
		}
	},
	computed: {
	}

};
</script>

<style lang="stylus">
.categoryContainer
	.categoryHeader
		padding 10upx 0
		.search
			width 90%
			height 60upx
			line-height 60upx
			text-align center
			margin 0 auto
			border 1upx solid #ededed
			border-radius 10upx
			background-color #eeeeee
			font-size 26upx
	.contentContainer
		display flex
		border-top 1upx solid #eeeeee
		box-sizing border-box
		.leftContainer
			width 20%
			border-right 1upx solid #eeeeee
			box-sizing border-box
			.leftScroll
				height calc(100vh - 80upx)
				.scrollItem
					font-size 28upx
					height 100upx
					line-height 100upx
					text-align center
					position relative
					margin 5upx 0
					&.active:after
						position absolute
						content ''
						height 60upx
						width 2upx
						background-color red
						top 22upx
						left 5upx
		.rightContainer
			width 80%
			.rightScroll
				height calc(100vh - 80upx)
				.contentList
					display flex
					flex-wrap wrap
					.contentImg
						width 520upx
						height 190upx
						margin 20upx auto
					.contentItem
						width 33.33%
						display flex
						flex-direction column
						align-items center
						image
							width 90%
							height 144upx
						text
							font-size 26upx
</style>

<!--  -->